<template>
  <div>
    <!--上部搜索条件组件-->
    <systeSearch :form-inline="formInline" @toSearch="toSearch"></systeSearch>
    <!--table 刷新-->
    <div class="table-conBtn">
      <freshCom @searchList="searchList"></freshCom>
    </div>
    <!--下部table-->
    <div class="table-box">
      <el-table
        ref="table"
        stripe
        v-loading="loading"
        :data="tableData"
        :fit="true"
        max-height="490"
      >
        <el-table-column type="index" label="序号">
          <template slot-scope="scope">
            {{
              scope.$index
                | filterPage(searchParams.pageNum, searchParams.pageSize)
            }}
          </template>
        </el-table-column>

        <el-table-column
          label="消息类型"
          prop="messageTemplateAliasEnum"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{
              scope.row.messageTemplateAliasEnum
                | filterName('system_message_template_alias')
            }}</span>
          </template>
        </el-table-column>

        <el-table-column label="发送用户" prop="noticeUserType" align="center">
          <template slot-scope="scope">
            <span>
              {{
                scope.row.noticeUserType | filterName('notice_user_type')
              }}</span
            >
          </template>
        </el-table-column>

        <el-table-column
          label="发送渠道"
          prop="sendTypesDesc"
          align="center"
        ></el-table-column>

        <el-table-column
          label="发送数量"
          prop="sendCount"
          align="center"
        ></el-table-column>

        <el-table-column
          label="发送成功数量"
          prop="sendSuccessCount"
          align="center"
        ></el-table-column>

        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="toDetail(scope.row)">
              详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!--分页-全局组件-->
    <pageCom
      :searchParams="searchParams"
      :total="total"
      @searchList="searchList"
    ></pageCom>
  </div>
</template>

<script>
import { sysTasksList } from '@/api/notice'
import systeSearch from '@component/messageManagement/message/systeSearch'
import { saveScrollMixins } from '@/mixins/saveScroll'

export default {
  mixins: [saveScrollMixins],
  components: { systeSearch },
  data() {
    return {
      loading: true,
      total: 0,
      tableData: [],
      searchParams: {
        pageNum: 1,
        pageSize: 10
      },
      formInline: {
        messageTemplateAlias: '', // 消息类型
        sendType: '' // 发送渠道
      },
      checkDialogData: {
        isShow: false,
        params: '',
        type: ''
      }
    }
  },
  activated() {
    this.toTableScrollHeight()
  },

  mounted() {
    this.searchList()

    this.$nextTick(() => {
      setTimeout(() => {
        this.setTableScrollHeight()
      }, 1000)
    })
  },
  methods: {
    filterName(id, name) {
      let obj = this.$store.state['valueTokey'][name]
      if (id && obj && obj[id]) {
        return obj[id].name
      }
      return ''
    },

    toDetail(row) {
      this.$router.push({
        name: 'wh:systeMessageDetail',
        query: { id: row.id }
      })
    },

    /* 获取列表 */
    searchList() {
      this.loading = true
      let params = { ...this.searchParams, ...this.formInline }
      sysTasksList(
        params,
        (response) => {
          this.loading = false
          this.tableData = response.rows
          this.total = response.total
          this.tableData.forEach((item) => {
            item.sendSuccessCount = item.sendSuccessCount
              ? item.sendSuccessCount
              : 0
            item.sendTypesDesc = item.sendTypesDesc.join(',')
          })
        },
        (response) => {
          this.loading = false
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    /* 换页 */
    changePage(page) {
      this.searchParams.pageNum = page
      this.searchList()
    },
    /* 搜索 */
    toSearch() {
      this.searchParams.pageNum = 1
      this.searchList()
    },
    /* 刷新列表 */
    refresh() {
      this.searchList()
    }
  }
}
</script>
